<template>
  <div class="headers">
    <div class="blackHeader">
      <ul>
        <li @click="onLogin"><i class="el-icon-user"></i>{{ username }}</li>
        |
        <li @click="onQuit">退出登录</li>
        |
        <li @click="onPush">我的订单</li>
        |
        <li>会员中心</li>
        |
        <li>帮助中心</li>
        |
        <li>关于我们</li>
        |
        <li><i class="el-icon-mobile-phone"></i>手机版</li>
      </ul>
    </div>
    <!-- <div class="whiteHeader">
      <div class="whiteBox">
        <div class="rubbit">
          <img src="@/assets/logo.0940ebb5.png" />
        </div>
        <ul class="list">
          <li class="active" @click="onShouY">首页</li>
          <li
            v-for="item in headerList"
            :key="item.id"
            @click="onGetId(item.id)"
            class="active"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="search">
 
          <i class="el-icon-search"></i>
          <input type="text" placeholder="搜一搜" style="outline: none" />
        </div>
        <div class="shopping">
         
          <el-popover placement="bottom" width="400" trigger="hover">
            购物车内容信息
            <el-button slot="reference" style="border: none">
              <el-badge :value="num" class="item"
                ><i class="el-icon-shopping-cart-1" style="font-size: 28px"></i>
              </el-badge>
            </el-button>
          </el-popover>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import user from "@/api/user";
export default {
  name: "headers",
  data() {
    return {
      username: "",
      num: 0, //购物车数量
      headerList: [],
      goodsId: "", //点击的id
    };
  },
  methods: {
    onShouY() {
      //点击首页
      this.bus.$emit("shouyeNum", false);
    },
    onGetId(val) {
      //获取头部id
      this.bus.$emit("goodId", val);
      this.bus.$emit("shouyeNum", true);
    },
    onLogin() {
      this.$router.push("/");
    },
    onQuit() {
      this.$router.push("/");
      localStorage.removeItem("userName");
    },
    onPush() {
      this.$router.push("/myorder");
    },
  },
  created() {
    let s = localStorage.getItem("userName");
    if (s) {
      this.username = s;
    } else {
      this.username = "请先登录";
    }
    let _this = this;
    user.getHeaderData().then((res) => {
      _this.headerList = res.data.result;
    });
  },
};
</script>

<style lang="less" scoped>
.active {
  color: black;
  text-decoration: none;
}
.active:hover {
  color: aqua;
}
.blackHeader {
  width: 100%;
  height: 55px;
  background: #333;
  ul {
    width: 650px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: 900px;
    color: rgba(255, 255, 255, 0.639);
    font-size: 15px;
  }
}
.whiteHeader {
  width: 100%;
  height: 130px;
  background: white;
  position: sticky;
  top: 0;
  .whiteBox {
    width: 1240px;
    height: 130px;
    margin: 0 auto;
    display: flex;
    .rubbit {
      display: flex;
      align-items: center;
      img {
        width: 210px;
        height: 80px;
      }
    }
    .list {
      width: 770px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .search {
      width: 160px;
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
      i {
        position: absolute;
      }
      input {
        width: 100%;
        height: 30px;
        border: none;
        background: transparent;
        border-bottom: 1px solid rgba(128, 128, 128, 0.666);
        padding-left: 25px;
        box-sizing: border-box;
      }
    }
    .shopping {
      display: flex;
      align-items: center;
      padding-left: 20px;
      box-sizing: border-box;
    }
  }
}
.content {
  width: 100%;
  .content-center {
    width: 1240px;
    margin: 0 auto;
  }
}
</style>